<template>
  <div class="dmb1">
    <div>
      <Header />
    </div>
    <div>
      <carousel />
      <div class="dmb2">
        <span class="dmb22"><b>正在热映：</b></span>
      </div>
      <hotMovie />
      <div class="dmb3">
        <div class="dmb4">
          <div class="dmb5">
            <span class="dmb6">即将上映：</span>
          </div>
          <div class="dmb7">
            <waitStart />
          </div>
        </div>
        <div class="dmb8">
          <div class="dmb9">
            <span class="dmb10">最受欢迎Top5电影:</span>
          </div>
          <top5Movie />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Header from '@/components/Client/GlobalCom/mobile/HeaderMobile'
import waitStart from '@/components/Client/DefaultCom/mobile/waitStartMobile'
import top5Movie from '@/components/Client/DefaultCom/mobile/top5MovieMobile'
import hotMovie from '@/components/Client/DefaultCom/mobile/hotMovieMobile'
import carousel from '@/components/Client/DefaultCom/mobile/carouselMobile'
import router from '@/router'
import { onMounted } from 'vue'
onMounted(() => {
  if (document.documentElement.clientWidth > document.documentElement.clientHeight) {
    router.push('/')
  }
})
</script>
<style lang="scss" scoped>
.dmb1 {
  background-image: linear-gradient(to right, #434343 0%, black 100%);
}
.dmb2 {
  width: 100%;
  height: 50%;
  text-align: left;
  margin-top: -35%;
}
.dmb22 {
  font-size: medium;
  color: orange;
}
.dmb3 {
  width: 100%;
  margin-top: 20%;
}
.dmb4 {
  width: 100%;
  float: left;
  height: 100%;
}
.dmb5 {
  text-align: left;
  margin-left: 10px;
}
.dmb6 {
  font-size: large;
  color: #42b983;
}
.dmb7 {
  width: 100%;
}
.dmb8 {
  width: 100%;
  float: left;
  height: 100%;
  margin-top: 2%;
}
.dmb9 {
  text-align: left;
  margin-left: 10px;
}
.dmb10 {
  font-size: large;
  color: #483d8b;
}
</style>
